<script setup>
import {ref} from "vue";
import {store} from "@/store.js";
import axios from "axios";
import {ElMessage} from "element-plus";


const secret = ref('')
// 获取audio标签的引用,必须名字都一模一样
const audioRef = ref(null)
const cuteAudioRef = ref(null)

function checkSecret() {

  axios.post('/api/configurations/secret', {
    payload: secret.value
  }).then(res=> {
    if (res.data.code === 0) {
      ElMessage({
        showClose: false,
        message: '欢迎公主！',
        type: 'success',
        duration: 4000
      })
      store.updateSecret(secret.value)
      playMusic()
    } else {
      ElMessage({
        showClose: false,
        message: '你好像走错路了...',
        type: 'error'
      })
      cuteAudioRef.value.play()
    }
  }).catch(e => {
    ElMessage({
      showClose: false,
      message: '服务繁忙...',
      type: 'error'
    })
  })
}

function playMusic() {
  audioRef.value.play()
}

</script>

<template>
  <div style="margin-top: 80px">
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        拍了拍Corwin，并说
        <el-input v-model="secret" placeholder="请输入今日暗语">
          <template #append>
            <el-button @click="checkSecret">go!</el-button>
          </template>
        </el-input>
        <audio ref="audioRef" src="/welcome.mp3" @ended="store.forward()"></audio>
        <audio ref="cuteAudioRef" src="/cute_touch.mp3"></audio>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>

</style>